$breakpoints: (
	xs: "only screen and (max-width: 320px)",
	sm: "only screen and (max-width: 400px)",
	md: "only screen and (max-width: 500px)",
	lg: "only screen and (max-width: 768px)"
) !default;
@mixin autoResponse($breakpoint) {
	$query: map-get($breakpoints, $breakpoint);
	@if not $query {
		@error "No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
	}
	/* stylelint-disable-next-line */
	@media #{if(type-of($query) == "string", unquote($query), inspect($query))} {
		@content;
	}
}